<template>
  <div class="back">
    <div class="backMain">
      <div class="backTop clearfix">
        <h2 class="fl">密码找回</h2>
      </div>

      <form class="back_form">
        <el-form :model="ruleForm"
                 :label-position="labelPosition"
                 :rules="rules"
                 label-width="110px"
                 ref="ruleForm">
          <el-form-item label="企业账号："
                        prop="userAccount">
            <el-input v-model="ruleForm.userAccount"></el-input>
          </el-form-item>
          <el-form-item label="手机号："
                        prop="mobileNo">
            <el-input v-model="ruleForm.mobileNo"></el-input>
          </el-form-item>
          <el-form-item label="手机验证码："
                        prop="smsCode">
            <el-col :span="15">
              <el-input v-model="ruleForm.smsCode"></el-input>
            </el-col>
            <el-col class="fr"
                    :span="8">
              <a class="getYzm"
                 @click="getCode"
                 v-show="codeFlag">点击获取</a>
              <a class="getYzm"
                 id="smsCode"
                 v-show="!codeFlag"
                 style='color:#666;background:#ccc;cursor:no-drop;'>点击获取</a>
            </el-col>
          </el-form-item>
          <el-form-item label="新密码："
                        prop="newPassword">
            <el-input v-model="ruleForm.newPassword"
                      type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码："
                        prop="newPassword2">
            <el-input v-model="ruleForm.newPassword2"
                      type="password"></el-input>
          </el-form-item>
        </el-form>
        <div class="backBtn_box">
          <input type="button"
                 @click="submitForm('ruleForm')"
                 class="submitBtn"
                 value="保存" />
          <input type="button"
                 @click="resetForm('ruleForm')"
                 class="cancelBtn"
                 value="取消" />
        </div>
      </form>
    </div>
    <p class="back_footer">Copy Right © Bossien All Rights Reserved 武汉博晟安全技术股份有限公司 版权所有</p>
  </div>
</template>

<script>
import config from "../../config.js"
export default {
  data () {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    var checknewPasswd = (rule, val, callback) => {
    //   console.log(val)
      if (!val) {
        return callback(new Error('新密码不能为空'))
      } else if (!/^[0-9A-Za-z]{6,}$/.test(val)) {
        return callback(new Error('至少输入6个以上的数字或字母'))
      } else {
        callback()
      }
    }
    var checknewPasswd2 = (rule, val, callback) => {
      if (!val) {
        return callback(new Error('新密码不能为空'))
      }
      if (this.ruleForm.newPassword != this.ruleForm.newPassword2) {
        return callback(new Error('两次密码输入不一致'))
      }
      callback()
    }
    return {
      labelPosition: 'right',
      codeFlag: true,
      time: null,
      ruleForm: {
        mobileNo: '',
        smsCode: '',
        newPassword: '',
        newPassword2: '',
        userAccount: ''
      },
      rules: {
        userAccount: [
          { required: true, message: "请输入企业账号", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            required: true,
            validator: checknewPasswd,
            trigger: "blur"
          }
        ],
        newPassword2: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          {
            required: true,
            validator: checknewPasswd2,
            trigger: "blur"
          }
        ],
        mobileNo: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            validator: checkPhone,
            trigger: "blur"
          }
        ],
        smsCode: [
          { required: true, message: "请输入手机验证码", trigger: "blur" }
        ]
      }
    }
  },
  destroyed(){
      clearInterval(this.time);
  },
  methods: {
    getCode () {
      this.codeFlag = false;
      var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      if (reg.test(this.ruleForm.mobileNo)) {
        var t = 30;
        this.time = setInterval(() => {
          t--;
          if (t != 0) {
            document.getElementById("smsCode").innerHTML = t + "s";
          } else {
            t = 0;
            clearInterval(this.time);
            this.codeFlag = true;
          }
        }, 1000);
        this.$axios
          .post(config.baseUrl + "emergency/v1.0/sms/verifyCode", {
            mobileNo: this.ruleForm.mobileNo
          })
          .then(res => {
            if (res.data.meta.success) {
              this.$message.success(res.data.data.verifySuccess);
            } else {
              this.$message.warning(res.data.meta.message);
            }
          })
          .catch(response => {
            console.log(response);
          });
      } else {
        this.$message.warning("请输入正确的手机号");
      }
    },
    submitForm () {
      let params = {
        mobileNo: this.ruleForm.mobileNo,
        newPassword: this.$md5(this.ruleForm.newPassword),
        smsCode: this.ruleForm.smsCode,
        userAccount: this.ruleForm.userAccount
      }
      this.$axios.post(config.baseUrl + 'emergency/v1.0/reset/password', params)
        .then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.$router.push('login')
          } else {
            this.$message.warning(res.data.meta.message)
          }

        }).catch((response) => {
          console.log(response);
        })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.$router.push('login')
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.back {
  height: 100%;
  width: 100%;
  background: url("../../../static/images/loginBg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .backMain {
    background: #fff;
    width: 1100px;
    position: absolute;
    left: 50%;
    margin-left: -550px;
    top: 48%;
    margin-top: -250px;
    padding-bottom: 60px;
    height: 500px;
    .backTop {
      padding: 30px 42px 0 35px;
      margin-bottom: 50px;
      h2 {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .back_form {
      width: 480px;
      margin-left: 240px;
      .getYzm {
        width: 100%;
        display: block;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #dcdfe6;
        color: #4080ff;
        text-align: center;
        cursor: pointer;
        margin-top: 1px;
      }
      .getYzm:hover {
        opacity: 0.8;
      }
      .backBtn_box {
        padding-top: 15px;
        padding-left: 110px;
        > input {
          width: 160px;
          height: 40px;
          border-radius: 8px;
          cursor: pointer;
        }
        > input:hover {
          opacity: 0.8;
        }
        .submitBtn {
          background: #4080ff;
          background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);
          border: none;
          color: #fff;
        }
        .cancelBtn {
          color: #4080ff;
          border: 1px solid #4080ff;
          background: #fff;
          margin-left: 20px;
        }
      }
    }
  }
  .back_footer {
    position: absolute;
    bottom: 3%;
    font-size: 12px;
    width: 100%;
    text-align: center;
    color: #888;
  }
}
</style>
